@import "./data";
@import "./color";
@import "./mixin";
// 首页导航栏
.index_nav {
    height: $index_nav_height;
    background-color: $index_nav_bgcolor;
    border-bottom: 1px solid #eee;
    .index_nav_center {
        width: $type_area_width;
        margin: 0 auto;
        height: $index_nav_height;
        .left_nav {
            float: left;
            .first_menu_li {
                float: left;
                width: 81px;
                font-size: $font-size;
                line-height: $index_nav_height + 1;
                text-align: center;
                border-left: 1px solid transparent;
                border-right: 1px solid transparent;
                box-sizing: border-box;
                position: relative;
                z-index: 999;
                &:hover {
                    background-color: #fff;
                    border-left: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                    box-sizing: border-box;
                    .first_menu {
                        color: $nav_import_color;
                    }
                    i{
                        color: $nav_import_color;
                    }
                    .left_nav_secont_menu {
                        display: block;
                    }
                }
                .first_menu {
                    // padding: 10px;
                    color: $font_color_a;
                }
             
                // 二级菜单
                .left_nav_secont_menu {
                    position: absolute;
                    width: 990px;
                    // height: 242px;
                    background-color: #fff;
                    border: 1px solid #ddd;
                    z-index: -1;
                    left: -1px;
                    top: 35px;
                    padding: 20px 0;
                    box-sizing: border-box;
                    display: none;
                    li {
                        float: left;
                        width: 176px;
                        border-right: 1px solid #eee;
                        padding-left: 20px;
                        box-sizing: content-box;
                        &:last-child {
                            border-right: none;
                        }
                        dl {
                            width: 176px;
                            text-align: left;
                            dt {
                                height: 25px;
                                font-size: 14px;
                                line-height: 17px;
                                margin-bottom: 3px;
                                cursor: pointer;
                            }
                            dd {
                                width: 176px;
                                // height: 125px;
                                overflow: hidden;
                                p {
                                    float: left;
                                    height: 25px;
                                    width: 78px;
                                    line-height: 25;
                                    position: relative;
                                    a {
                                        height: 25px;
                                        width: 78px;
                                        display: block;
                                        position: absolute;
                                        padding: 0;
                                        line-height: 25;
                                        line-height: normal;
                                        color: #666;
                                        &:hover {
                                            color: $nav_import_color;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    .close {
                        position: absolute;
                        right: 12px;
                        top: -84px;
                        width: 10px;
                        height: 10px;
                        text-align: center;
                        line-height: 10;
                        font-size: 20px;
                        i {
                            transition: all 1s;
                            &:hover {
                                transform: rotate(-180deg);
                            }
                        }
                    }
                }
                .tenants {
                    width: 164px;
                    // height: 124px;
                    .spical_shop {
                        dl {
                            border: none;
                        }
                    }
                }
                .customer_service {
                    width: 162px;
                    left: -82px;
                }
                &:first-child:hover{
                    background-color: #f5f5f5;
                    border: none;
                   
                }
            }
        }
        .right_nav {
            float: right;
            .right_nav_li {
                float: left;
                width: 81px;
                font-size: $font-size;
                line-height: $index_nav_height + 1;
                text-align: center;
                border-left: 1px solid transparent;
                border-right: 1px solid transparent;
                box-sizing: border-box;
                position: relative;
                z-index: 999;
                &:hover {
                    background-color: #fff;
                    border-left: 1px solid #ddd;
                    border-right: 1px solid #ddd;
                    box-sizing: border-box;
                    .right_nav_word {
                        color: $nav_import_color;
                    }
                    .right_nav_secont_menu {
                        display: block;
                    }
                }
                .right_nav_word {
                    color: $font_color_a;
                }
                .right_nav_secont_menu {
                    position: absolute;
                    background-color: #fff;
                    border: 1px solid #ddd;
                    z-index: -1;
                    left: -1px;
                    padding: 20px 0;
                    display: none;
                    li {
                        float: left;
                        width: 76px;
                        border-right: 1px solid #eee;
                        padding-left: 5px;
                        box-sizing: border-box;
                        &:last-child {
                            border-right: none;
                        }
                        dl {
                            width: 81px;
                            text-align: left;
                            dt {
                                height: 25px;
                                font-size: 14px;
                                line-height: 17px;
                                margin-bottom: 3px;
                                cursor: pointer;
                            }
                            dd {
                                width: 81px;
                                // height: 125px;
                                overflow: hidden;
                                p {
                                    // float: left;
                                    height: 25px;
                                    width: 69px;
                                    line-height: 25;
                                    position: relative;
                                    a {
                                        height: 25px;
                                        // width: 78px;
                                        display: block;
                                        position: absolute;
                                        padding: 0;
                                        line-height: 25;
                                        line-height: normal;
                                        color: #666;
                                        &:hover {
                                            color: $nav_import_color;
                                        }
                                    }
                                }
                            }
                        }
                        .my_order {
                            width: 81px;
                        }
                    }
                }
                .my_order {
                    width: 79px;
                    top: 35px;
                }
                .easy_buy {
                    width: 205px;
                    top: 35px;
                    li {
                        // width: 195px;
                        width: 205px;

                        dl {
                            // width: 195px;
                            width: 205px;

                            dt {
                                width: 180px;
                                height: 56px;
                                p {
                                    width: 54px;
                                    height: 54px;
                                    float: left;
                                    border: 1px solid #f7f7f7;
                                    img {
                                        width: 100%;
                                        height: 100%;
                                    }
                                }
                                a {
                                    display: block;
                                    float: left;
                                    width: 91px;
                                    height: 28px;
                                    margin-left: 33px;
                                    margin-top: 14px;
                                    font-size: 12px;
                                    color: $font_color_a;
                                    &:hover {
                                        color: $nav_import_color;
                                    }
                                }
                            }
                            dd {
                                width: 205px;

                                // width: 195px;

                                p {
                                    float: left;
                                    width: 100px;
                                }
                            }
                        }
                    }
                }
                .shop_car {
                    width: 280px;
                    height: 400px;
                    top: 35px;
                    li {
                        width: 100%;
                        dl {
                            width: 100%;
                            dt {
                                width: 150px;
                                height: 96px;
                                margin: 0 auto;
                                margin-top: 80px;
                                p {
                                    width: 100%;
                                    img {
                                        width: 100%;
                                    }
                                }
                            }
                            dd {
                                width: 100%;
                                margin-top: 8px;
                                padding: 0 5px;
                                box-sizing: border-box;
                                display: flex;
                                justify-content: center;
                            }
                            .shop_car_first_line {
                                color: #bbb;
                                font-size: 14px;
                            }
                            .shop_car_second_line {
                                margin-top: 20px;
                                color: #bbb;
                                font-size: 12px;
                            }
                            .login_btn {
                                margin-top: 2px;

                                span {
                                    display: inline-block;
                                    padding: 0 20px;
                                    line-height: 26px;
                                    background-color: $nav_import_color;
                                    margin-left: 5px;
                                    color: #fff;
                                    border-radius: 2px;
                                }
                            }
                        }
                    }
                }
                .mobile_suning {
                    width: 582px;
                    left: -504px;
                    top: 35px;
                    li {
                        width: 100%;
                        dl {
                            float: left;
                            width: 120px;
                            margin: 13px 0 0 20px;
                            dt {
                                width: 120px;
                                height: 120px;
                                margin-bottom: 2px;
                                p {
                                    img {
                                        width: 100%;
                                    }
                                }
                            }
                            dd {
                                width: 120px;

                                overflow: hidden;
                                text-align: center;
                                color: #666;
                                p {
                                    width: 100%;
                                    height: 17px;
                                    line-height: 17px;
                                }
                            }
                        }
                    }
                }
            }
            .common_nav_li {
                width: auto;
                a {
                    padding: 0 10px;
                }
                &:hover {
                    background-color: $index_nav_bgcolor;
                    border-color: transparent;
                }
            }
            .nav_imp {
                color: $nav_import_color !important;
                a {
                    color: $nav_import_color !important;
                }
            }
            .shop_car {
                width: 93px;
            }
        }
    }
}